<template>
  <div :class="[used ? dark : light, '']">
    <div class="coupon-left">
      <p class="title">电影专享代金券</p>
      <p class="p1">购票即可抵扣，快去购票吧</p>
      <p class="p2">有效期至: {{ date }}</p>
    </div>
    <div :class="[used ? unUsedClass : usedClass, '']" @click="buy">
      <p class="price">{{ num }}</p>
      <span class="yuan">元</span>
      <p class="buy" v-show="!used">购票</p>
      <div class="used-logo" v-show="used">
        <img src="~@/assets/images/coupon/已过期@2x.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      light: 'coupon light',
      dark: 'coupon dark',
      usedClass: 'coupon-right',
      unUsedClass: 'coupon-right-u'
    }
  },
  props: {
    num: {
      type: Number,
      default: 5,
    },
    used: {
      type: Boolean,
      default: true,
    },
    date: {
      default: '2020-7-30',
    },
  },
  methods: {
    buy() {
      this.$router.push({name: 'buyTicket'})
    }
  }
}
</script>

<style lang="scss" scoped>
.light {
  background-image: url('~@/assets/images/coupon/coupon_light.png');
}
.dark {
  background-image: url('~@/assets/images/coupon/coupon_dark.png');
}
.coupon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 240px;
  width: 670px;
  background-size: 670px 240px;

  .coupon-left {
    position: relative;
    width: 430px;
    height: 100%;
    font-size: 24px;
    color: #ffffff;

    .title {
      position: absolute;
      font-weight: bold;
      left: 44px;
      top: 44px;
      font-size: 36px;
      font-weight: bold;
    }

    .p1 {
      position: absolute;
      font-weight: bold;
      left: 44px;
      opacity: 0.38;
      top: 110px;
    }

    .p2 {
      position: absolute;
      font-weight: bold;
      left: 44px;
      opacity: 0.38;
      top: 160px;
    }
  }

  .coupon-right {
    position: relative;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    width: 240px;
    height: 100%;
    .price {
      position: absolute;
      font-weight: bold;
      font-size: 48px;
      left: 88px;
      top: 61px;
    }
    .yuan {
      position: absolute;
      font-weight: bold;
      left: 117px;
      font-size: 32px;
      bottom: 129px;
    }
    .buy {
      position: absolute;
      font-weight: bold;
      font-size: 36px;
      top: 136px;
      left: 84px;
    }
  }

  .coupon-right-u {
    position: relative;
    width: 240px;
    height: 100%;
    opacity: 0.71;
    font-weight: bold;
    color: #ffffff;

    .price {
      position: absolute;
      font-weight: bold;
      font-size: 48px;
      left: 92px;
      top: 70px;
    }
    .yuan {
      position: absolute;
      font-weight: bold;
      font-size: 32px;
      right: 87px;
      bottom: 118px;
    }

    .used-logo {
      position: absolute;
      bottom: 38px;
      right: 40px;

      img {
        width: 108px;
        height: 108px;
      }
    }
  }
}
</style>
